import React, { Component } from 'react';
import { Form, Input, Card, Button } from 'antd';
import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class BaseView extends Component {
  formRef = React.createRef();

  confirmHandler = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      await this.props.store.saveUserCfgHandler(values);
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    const { store } = this.props;

    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    return (
      <Card style={{ overflow: 'auto' }} title='基本设置' bordered={false}>
        <Form ref={this.formRef} {...layout} initialValues={store.userCfg} style={{ width: 500 }}>
          <Form.Item name='uid'>
            <Input type="hidden"/>
          </Form.Item>
          <Form.Item label="登录名称" name='loginName'>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="用户姓名" name='name' rules={[{ required: true, message: '请输入用户姓名！' }]}>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="手机号码" name='mobile' rules={[{ required: true, message: '请输入手机号码！' }]}>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="固定电话" name='tel'>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="传真" name='fax'>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="身份证号" name='idNo'>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="通讯地址" name='addr'>
            <Input autoComplete="off"/>
          </Form.Item>
          <Form.Item label="描述" name='remark'>
            <Input.TextArea autoComplete="off"/>
          </Form.Item>
          <Form.Item style={{ marginLeft: 250 }}>
            <Button type='primary' style={{ marginRight: 5 }} onClick={this.confirmHandler}>保存设置</Button>
          </Form.Item>
        </Form>
      </Card>);
  }
}

export default BaseView;
